<template>
  <el-container>
    <el-aside width="220px">
<!--      <el-scrollbar class="aside-scroll">-->
        <!-- 系统简图 -->
        <el-row class="st_simple-part">
          <el-avatar
              shape="circle"
              :size="50"
              :fit="st_fit"
              :src="st_photoUrl"
          ></el-avatar>
          <el-row class="description">
            <el-col>Science</el-col><el-divider direction="vertical"></el-divider>
            <el-col>Education</el-col>
          </el-row>
        </el-row>
        <!-- 用户简要信息 -->
        <el-row class="user_simple-part">
          <el-col :span="8">
            <el-avatar
                shape="circle"
                :size="44"
                :fit="st_fit"
                :src="user.photoUrl"
            ></el-avatar>
          </el-col>
          <el-col :span="12" class="description">
            <h3>{{ user.username }}</h3>
            <i class="el-icon-success"></i>&nbsp;&nbsp;<span>Online</span>
          </el-col>
        </el-row>
        <!-- 搜索框 -->
        <!--      <el-row class="search_input-part">-->
        <!--        <el-input placeholder="Search..." v-model="inputForSearch">-->
        <!--          <el-button slot="append" icon="el-icon-search"></el-button>-->
        <!--        </el-input>-->
        <!--      </el-row>-->
        <!-- 导航菜单 -->
        <el-row class="nav_menu-header">MAIN NAVIGATION</el-row>
        <hr />
        <!-- 菜单主体部分 -->
        <el-row>
          <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              @select="handleSelect"
              background-color="#222d32"
              text-color="#fff"
              active-text-color="#ffd04b"
              :router="false"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-info"></i>
                <span>个人信息</span>
              </template>
              <el-menu-item-group title="个人中心">
                <!-- <template slot="title">基本信息</template> -->
                <el-menu-item index="1-1">基本信息</el-menu-item>
                <el-menu-item index="1-2">数据统计</el-menu-item>
                <el-menu-item index="1-3">安全中心</el-menu-item>
              </el-menu-item-group>
              <!-- <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">安全中心</el-menu-item>
              </el-menu-item-group> -->
              <!-- <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu> -->
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-upload"></i>
                <span>成果上报</span>
              </template>
              <el-menu-item-group>
                <template slot="title">指导奖项</template>
                <el-menu-item index="2-1">学生获奖</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="教学成果">
                <el-menu-item index="2-2">教学项目</el-menu-item>
                <el-menu-item index="2-3">教学竞赛</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="教改成果">
                <el-menu-item index="2-4">教改项目</el-menu-item>
                <el-menu-item index="2-5">教学论文</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="科研成果">
                <el-menu-item index="2-6">科研项目信息</el-menu-item>
                <el-menu-item index="2-7">科研论文</el-menu-item>
                <el-menu-item index="2-8">科研奖项</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="出版刊物">
                <el-menu-item index="2-9">出版教材</el-menu-item>
                <el-menu-item index="2-10">出版专著</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="专利专著">
                <el-menu-item index="2-11">专利发表</el-menu-item>
                <el-menu-item index="2-12">软著申请</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="3">
              <i class="el-icon-search"></i>
              <span slot="title">成果查询</span>
            </el-menu-item>
<!--            <el-menu-item index="4">-->
<!--              <i class="el-icon-document"></i>-->
<!--              <span slot="title">上传记录</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="5">-->
<!--              <i class="el-icon-download"></i>-->
<!--              <span slot="title">导出记录</span>-->
<!--            </el-menu-item>-->
            <el-menu-item index="4">
              <i class="el-icon-menu"></i>
              <span slot="title">全局检索</span>
            </el-menu-item>
          </el-menu>
        </el-row>
<!--      </el-scrollbar>-->
    </el-aside>
    <!-- 右边部分 -->
    <el-main class="right_content-part">
      <!-- 顶部 -->
      <header class="right_part_header">
        <img :src="header_bk" />
        <div class="control-btns">
          <el-button-group>
            <el-button type="warning" round plain @click="logout"
              >退出登录</el-button
            >
          </el-button-group>
        </div>
      </header>
      <!-- 主体部分 -->
      <section>
        <!-- 引入子组件 -->
        <BasicInfo v-if="menuControl.show_BasicInfo"/>
        <SafeCenter v-if="menuControl.show_SafeCenter"/>
        <StuAward v-if="menuControl.show_StuAward"/>
        <TeacContest v-if="menuControl.show_TeacContest"/>
        <TeacItem v-if="menuControl.show_TeacItem"/>
        <EduReformItem v-if="menuControl.show_EduReformItem"/>
        <EduReformPaper v-if="menuControl.show_EduReformPaper"/>
        <SciSerrchItem v-if="menuControl.show_SciSerrchItem"/>
        <SciresearchPaper v-if="menuControl.show_SciresearchPaper"/>
        <SciresearchAward v-if="menuControl.show_SciresearchAward"/>
        <PublishBook v-if="menuControl.show_PublishBook"/>
        <PublishTreatise v-if="menuControl.show_PublishTreatise"/>
        <PublishPatent v-if="menuControl.show_PublishPatent"/>
        <PublishSoftWork v-if="menuControl.show_PublishSoftWork"/>
        <SearchCenter v-if="menuControl.show_SearchCenter"/>
        <GlobalSearch v-if="menuControl.show_GlobalSearch"/>
      </section>
    </el-main>
  </el-container>
</template>

<script>
import BasicInfo from '@/components/PersonalInfo/BasicInfo.vue'
import SafeCenter from '@/components/PersonalInfo/SafeCenter.vue'
import StuAward from '@/components/uploadInfo/StuAward.vue'
import TeacContest from '@/components/uploadInfo/TeacContest.vue'
import TeacItem from '@/components/uploadInfo/TeacItem.vue'
import EduReformItem from '@/components/uploadInfo/EduReformItem'
import EduReformPaper from '@/components/uploadInfo/EduReformPaper'
import SciSerrchItem from '@/components/uploadInfo/SciSerrchItem'
import SciresearchPaper from '@/components/uploadInfo/SciresearchPaper'
import SciresearchAward from '@/components/uploadInfo/SciresearchAward'
import PublishBook from '@/components/uploadInfo/PublishBook'
import PublishTreatise from '@/components/uploadInfo/PublishTreatise'
import PublishPatent from '@/components/uploadInfo/PublishPatent'
import PublishSoftWork from '@/components/uploadInfo/PublishSoftWork'
import SearchCenter from '@/components/searchInfo/SearchCenter'
import GlobalSearch from "@/components/globalSearch/GlobalSearch";
export default {
  name: 'index',
  components: {
    //组件注册
    BasicInfo, //基本信息
    SafeCenter, //安全中心
    StuAward, //学生获奖
    TeacContest, //教师竞赛
    TeacItem, //教学项目
    EduReformItem, //教改项目
    EduReformPaper, //教改论文
    SciSerrchItem, //科研项目
    SciresearchPaper, //科研论文
    SciresearchAward, //科研奖项
    PublishBook,//出版教材
    PublishTreatise,//出版专著
    PublishPatent,//发表专利
    PublishSoftWork,//申请软著
    SearchCenter,//搜索中心
    GlobalSearch,//全局检索
  },
  data() {
    return {
      st_photoUrl: require('../assets/st_icon.png'),
      header_bk: require('../assets/web_img.png'),
      st_fit: 'fit',
      //用户信息
      user: {
        username: '当前状态',
        photoUrl: require('../assets/st_icon.png'),
      },
      inputForSearch: '',
      //显隐控制
      menuControl:{
        show_BasicInfo:true,//基本信息
        show_SafeCenter:false,//安全中心
        show_StuAward:false,//学生获奖
        show_TeacContest:false,//教师竞赛获奖
        show_TeacItem:false,//教学竞赛获奖
        show_EduReformItem:false,//教改项目
        show_EduReformPaper:false,//教改论文
        show_SciSerrchItem:false,//科研项目
        show_SciresearchPaper:false,//科研论文
        show_SciresearchAward:false,//科研奖项
        show_PublishBook:false,//出版教材
        show_PublishTreatise:false,//出版专著
        show_PublishPatent:false,//发表专利
        show_PublishSoftWork:false,//申请软著
        show_SearchCenter:false,//搜索中心
        show_GlobalSearch:false,//全局检索
      }
    }
  },
  mounted() {
  },
  methods: {
    // 菜单open/close方法
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    /**
     * 菜单选择-控制页面子组件显隐
     * @param key
     * @param keyPath
     */
    handleSelect(key, keyPath){
      // console.log(key, keyPath)
      //根据key值判断菜单绑定到的子组件
      switch (key){
        case "1-1":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标子组件
          this.menuControl.show_BasicInfo=true;//基本信息
          break;
        }
        case "1-2":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          break;
        }
        case "1-3":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_SafeCenter=true;
          break;
        }
        case "2-1":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_StuAward=true;
          break;
        }
        case "2-2":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_TeacItem=true;
          break;
        }
        case "2-3":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_TeacContest=true;
          break;
        }
        case "2-4":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_EduReformItem=true;
          break;
        }
        case "2-5":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_EduReformPaper=true;
          break;
        }
        case "2-6":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_SciSerrchItem=true;
          break;
        }
        case "2-7":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_SciresearchPaper=true;
          break;
        }
        case "2-8":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_SciresearchAward=true;
          break;
        }
        case "2-9":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_PublishBook=true;
          break;
        }
        case "2-10":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_PublishTreatise=true;
          break;
        }
        case "2-11":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_PublishPatent=true;
          break;
        }
        case "2-12":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_PublishSoftWork=true;
          break;
        }
        case "3":{
          //隐藏组件
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_SearchCenter=true;
          break;
        }
        case "4":{
          this.hideSubComponents();
          //显示目标组件
          this.menuControl.show_GlobalSearch=true;
          break;
        }
      }
    },

    hideSubComponents(){
      this.menuControl.show_BasicInfo=false;//基本信息
      this.menuControl.show_SafeCenter=false;//安全中心
      this.menuControl.show_StuAward=false;//学生获奖
      this.menuControl.show_TeacContest=false;//教师竞赛获奖
      this.menuControl.show_TeacItem=false;//教学竞赛获奖
      this.menuControl.show_EduReformItem=false;//教改项目
      this.menuControl.show_EduReformPaper=false;//教改论文
      this.menuControl.show_SciSerrchItem=false;//科研项目
      this.menuControl.show_SciresearchPaper=false;//科研论文
      this.menuControl.show_SciresearchAward=false;//科研奖项
      this.menuControl.show_PublishBook=false;//出版教材
      this.menuControl.show_PublishTreatise=false;//出版专著
      this.menuControl.show_PublishPatent=false;//发表专利
      this.menuControl.show_PublishSoftWork=false;//申请软著
      this.menuControl.show_SearchCenter=false;//成果查询
      this.menuControl.show_GlobalSearch=false;//全局检索
    },
    //页面跳转方法

    //退出登录
    logout() {
      //移除本地localstorage中的token
      localStorage.removeItem('token')
      //退出登录
      this.$router.push('/')
    },
  },
}
</script>
<style scoped>
.el-container {
  min-height: 1200px;
}
.el-aside {
  color: #fff;
  background-color: #222d32;
  border-right: 1px solid #ccc;
}
/*滚动条问题*/
.aside-scroll{
  /*overflow-y: hidden;*/
}

/* 系统简介部分 */
.st_simple-part {
  padding: 5px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  height: 90px;
  background-color: #367fa9;
  border-bottom: 1px solid #ccc;
}
.st_simple-part .description {
  display: flex;
  justify-content: center;
}
/* 用户信息 */
.user_simple-part {
  padding: 10px 0 10px 0;
  border-bottom: 1px solid #ccc;
}
.user_simple-part .description {
  padding-left: 10px;
  text-align: left;
}
.user_simple-part .description h3 {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 5px;
}
.el-icon-success {
  color: #67c23a;
}
/* 搜索框部分#374850 */
.search_input-part {
  background-color: #222d32;
}

/* 导航菜单头部 */
.nav_menu-header {
  margin: 0 auto;
  margin-top: 0.6rem;
  padding-left: 1.2rem;
  /* width: 95%; */
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 0.9rem;
  color: #435a66;
  background-color: #1a2226;
  border: 1px solid #000;
}
.el-menu {
  text-align: left !important;
}
/* 右边部分 */
.right_content-part {
  padding: 0px;
  background-color: #fff;
}
.right_content-part .right_part_header {
  height: 90px;
  border-bottom: 1px solid #ccc;
  background-color: #3c8dbc;
}
.right_content-part .right_part_header img {
  float: left;
  height: 90px;
}
.right_content-part .right_part_header .control-btns {
  height: 90px;
  float: right;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 960px) {
  .right_content-part .right_part_header .control-btns {
    display: none;
  }
}
.right_content-part .right_part_header .control-btns .el-button-group {
  align-self: center;
}
</style>
